<script setup>
import WaterFall from '@/views/interestingComponents/waterfall/components/water-fall.vue'

const images = ref([])

onMounted(() => {
  setImages()
})

function setImages() {
  images.value = [
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 1000,
      height: 500,
    },
    {
      width: 500,
      height: 200,
    },
    {
      width: 300,
      height: 100,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 600,
      height: 400,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
    {
      width: 100,
      height: 100,
    },
  ]
}
</script>

<template>
  <div class="waterfall-wrapper">
    <WaterFall :images="images" />
  </div>
</template>
